<!--
 * 块元素
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-block" :class="classes" :style="styles">
        <view class="pure-block-content">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // #ifndef MP-TOUTIAO
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];

                // 纵横比
                if (this.ratio) styles.push(`--pure-block-aspect-ratio-prop: ${this.ratio}`);

                return styles;
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
